<template>
	<view class="goods-category">
		<view class="first-cates">
			<view class="tabs">
				<su-tabs :list="state.data"  :scrollable="true" :borderNode="state.borderNode" lineHeight="0"
				:current="state.currentTab" :activeStyle="{color:'#1D1D1D','font-size':'36rpx',fontFamily: 'YouSheBiaoTiHei'}" itemStyle="height:38rpx"
				:inactiveStyle="{'color':'6C6C6C','font-size':' 28rpx'}"
				@change="onTabsChange" keyName='name'></su-tabs>
			</view>
			<view class="icons" @click="categoryClick" >
				<uni-icons type="bars" size="24"></uni-icons>
			</view>
		</view>
	</view>
	<template v-if="state.data[state.selecIndex]&&state.data[state.selecIndex].children">
		<scroll-view class="scroll" scroll-x="true" show-scrollbar="true">
			<view  class="item" v-for="(item,index) in state.data[state.selecIndex].children" :key="index" @click="secondCategoryClick(item,index)">
				<image :src="sheep.$url.cdn(item.image)" class="item-img"></image>
				<view class="item-txt">{{item.name}}</view>
			</view>
		</scroll-view>
	</template>

</template>

<script setup>
	import {reactive,onMounted} from 'vue';
	
	import sheep from '@/sheep';
	const props = defineProps({
	  data: {
	    type: Object,
	    default() {},
	  },
	  styles: {
	    type: Object,
	    default() {},
	  },
	});
	const state = reactive({
		currentTab:0,
		selecIndex:0,
		data:[],
		borderNode:true,
	});
	
	function onTabsChange(e){
		state.selecIndex = e.index;
	}
	
	function categoryClick(){
		uni.navigateTo({
			url:'/pages/etc/category'
		})
	}
	
	function secondCategoryClick(item,index){
		if(item.id == 'cxk'){
			sheep.$router.go(props.data.url|| '/pages/goods/list?categoryId=33')
		}else{
			sheep.$router.go('/pages/etc/category?first='+state.selecIndex+'&second='+index)
		}

	}
		
	//获取分类
	onMounted(()=>{
		getCategorys();
	})
	//获取分类
	async function getCategorys(){
		const { error, data } = await sheep.$api.category.list();
		if (error === 0) {
		  state.data = data.children;
		  state.data[0].children.splice(2, 0, {
			  image: props.data.src||'/storage/decorate/20250326/5aba0435d9ca780c565c7d6167326a07.png',
			  name:props.data.title||'鲸选商品',
			  id:'cxk'
		  });
		}
	}
	
	
</script>

<style lang="scss" scoped>
	
	.goods-category{
		width:100%;
		display: flex;
		flex-direction: column;
		.first-cates{
			display:flex;
			flex-direction: row;
			.tabs{
				width:calc(100% - 66rpx);
				margin-right: 10rpx;
			}
			.icons{
				width:56rpx;
				height:38rpx;
				padding:0 6rpx;
				
				display:flex;
				
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.scroll{
		white-space: nowrap;
		width: 100%;
		height:138rpx;
		margin-top:16rpx;
		margin-bottom: 16rpx;
		
		.item{
			display: inline-block;
			width:127rpx;
			height:135rpx;
			margin-right: 20rpx;
			
			.item-img{
				width: 77rpx;
				height: 77rpx;
				// background: #D8D8D8;
				margin-left:25rpx;
				border-radius:10rpx;
			}
			.item-txt{ 
				margin-top:10rpx;
				height: 35rpx;
				width:127rpx;
				
				font-family: Source Han Sans;
				font-size: 25rpx;
				color: #9E9E9E;
				
				display: flex;
				justify-content: center;
				align-items: center;
				white-space: nowrap;       
				overflow: hidden;         
				text-overflow: ellipsis;
			}
		}
		.item:last-child{
			margin-right: 20rpx;
		}
		.item:first-child{
			margin-left: 20rpx;
		}
	}
</style>